<template>
  <div>
    <!-- 图层目录树 -->
    <div class="catalog_containor" v-show="mapshow == true">
      <div class="mulu">
        <h2>图层目录</h2>
      </div>
      <el-tree
        :data="mapTree"
        show-checkbox
        node-key="id"
        ref="tree"
        default-expand-all
        :default-checked-keys="dck"
        @check-change="changeLayer"
      >
        <span class="custom-tree-node" slot-scope="{ data }">
          <i v-if="data.id == '11'" class="el-icon-folder-opened"></i>
          <img src="../assets/image/Area.png" alt="" v-if="data.id == '0'" />
          <img src="../assets/image/Stree.png" alt="" v-if="data.id == '1'" />
          <img src="../assets/image/Event.png" alt="" v-if="data.id == '2'" />
          <img src="../assets/image/Event.png" alt="" v-if="data.id == '3'" />
          <img src="../assets/image/Event.png" alt="" v-if="data.id == '4'" />
          <!-- {{data.id}} -->
          {{ data.label }}
        </span>
      </el-tree>
    </div>

    <!-- 控制目录树显隐 -->
    <div
      class="showTreeControl"
      v-if="mapshow == true"
      @click="mapshow = !mapshow"
    >
      <i v-if="mapshow == true">
        <menu-fold
          theme="two-tone"
          size="25"
          :fill="['#000000', '#000000']"
          :strokeWidth="3"
          strokeLinejoin="miter"
          strokeLinecap="butt"
        />
      </i>
    </div>

    <div class="hideTreeControl" v-else @click="mapshow = !mapshow">
      <i>
        <menu-unfold
          theme="two-tone"
          size="25"
          :fill="['#000000', '#000000']"
          :strokeWidth="3"
          strokeLinejoin="miter"
          strokeLinecap="butt"
        />
      </i>
    </div>
  </div>
</template>

<script>
import { MenuFold, MenuUnfold } from '@icon-park/vue'
export default {
  components: { MenuFold, MenuUnfold },
  data() {
    return {
      mapTree: [
        { id: 11, label: '光谷智慧交通文档', disabled: true, children: [] },
      ],
      mapshow: true,
      dck: [],
    }
  },
  mounted() {
    this.getMapCatalog()
    this.setDck()
  },
  methods: {
    // 获取图层
    getMapCatalog() {
      var that = this
      /* 获取地图服务目录 */
      var mapService = new Zondy.Catalog.MapDoc({
        ip: 'localhost',
        port: 6163,
        docName: 'guanggu',
      })

      //调用获取数据源的数据库列表接口，回调函数中处理结果,getLayersInof：得到guanggu中的图层
      mapService.getLayersInfo(getMapCatalogSuccess)
      // 定义一个函数接收目录
      function getMapCatalogSuccess(data) {
        data.value.forEach((item) => {
          that.mapTree[0].children.push({
            id: item.LayerIndex,
            label: item.Name,
          })
          that.dck.push(Number(item.LayerIndex))
        })
        // data:layerIndex、RUL
        // console.log(data.value)
      }
    },
    // 由于从中地获取的数据渲染晚于elementUI的树形控件default-checked-keys的渲染，
    // 所以手动设置setTimeout吧dck设置上去
    setDck() {
      setTimeout(() => {
        var keys = this.dck.slice(0)
        this.dck = keys
        // console.log(this.dck)
      }, 1000)
    },
    // 选中显示和隐藏
    changeLayer(data, ischecked) {
      if (!data.children) {
        //没有子节点,
        if (ischecked) {
          //获取原型上的doclayer，选择状态不能用show和hide，要用include和exclude
          this.$store.state.docLayer.setLayerStatus(Number(data.id), 'include')
          // console.log(data.id)
        } else {
          //没有选中状态
          this.$store.state.docLayer.setLayerStatus(Number(data.id), 'exclude')
          // console.log(data.id)
        }
      }
    },
  },
}
</script>

<style>
.catalog_containor {
  position: fixed;
  width: 200px;
  height: 300px;
  top: 250px;
  background-color: transparent;
  background-color: rgba(255, 255, 255, 0.5);
  border-top-right-radius: 10px;
  border-radius: 0 20px 20px 0;
  z-index: 150;
}
.el-tree {
  background-color: rgba(0, 127, 255, 0);
}
.catalog_containor .mulu {
  text-align: center;
  color: white;
  background-color: rgba(0, 127, 255, 1);
  border-radius: 0 20px 0 0;
}
.showTreeControl {
  position: fixed;
  top: 330px;
  left: 168px;
  padding: 2px;
  padding-top: 14px;
  width: 28px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px 0 0 8px;
  z-index: 150;
}
.hideTreeControl {
  position: fixed;
  top: 330px;
  /* left: 168px; */
  padding: 2px;
  padding-top: 14px;
  width: 24px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0 8px 8px 0px;
  z-index: 150;
}
</style>
